<template>
	<view>

		<!-- 页首 -->
		<zw-header :searchKeyword="keyword == 'all' ? '' : keyword"></zw-header>

		<!-- 面包屑 -->
		<bread-crumb pages="搜索"></bread-crumb>

		<!-- 类别栏 -->
		<filter-list name="商品主类" :list="categories" :activeIndex="categoryIndex" @change="categoryChange"></filter-list>
		<!-- 排序方式 -->
		<view class="sort">
			<view class="sortList">
				<view class="label elip">二级分类：</view>
				<view class="list">
					<block v-for="(item, index) in secList" :key="index">
						<view class="item">
							<text :class="['name elip', {'active': secIndex == index}]" @click="changeSec(item.id,index)">
								{{item.name}}
							</text>
						</view>
					</block>
				</view>
			</view>
		</view>
		<!-- 排序方式 -->
		<view class="sort">
			<view class="sortList">
				<view class="label elip">快捷筛选：</view>
				<view class="list">
					<block v-for="(item, index) in sortModes" :key="index">
						<view class="item">
							<text :class="['name elip', {'active': sortIndex == index}]" @click="change(index)">
								{{item}}
							</text>
						</view>
					</block>
				</view>
			</view>
		</view>
		<!-- 主体内容 -->
		<view class="search-wrapper">
			<view class="wrap">
				<!-- 商品列表 -->
				<view class="goodsMain" v-if="!nullInfo">
					<view class="goodsItem"  v-for="(goods,i) in goodsList" :key="i">
						<a :href="`#/pages/goods/index?id=${goods.id}`" target="_blank" >
							<u-lazy-load
							 :image="goods.logoUrl" 
							 img-mode="widthFix"
							 :duration='100'
							 ></u-lazy-load>
							<view class="goodsName elip_2">
								<text v-if="goods.name.length<15">{{goods.name}}<text class="nbsp">商品名称占位修饰商品名称占位修饰</text></text>
								<text v-else>{{goods.name}}</text>
							</view>
							<view class="goodsPrice">
								<text class="price">
									¥<text class="priceBox">{{goods.price}}</text>
									<!-- <text class="market" v-if="goods.agencyPrice">¥{{goods.agencyPrice}} 代理商专属价</text> -->
								</text>
							</view>
							<view class="goodsTip">
								<!-- <text>{{goods.sellNum}}人付款</text> -->
								<text class="elip_1">{{goods.sellerName}}</text>
							</view>
							<view class="goodsZw"></view>
						</a>
					</view>
				</view>
				<view class="goods-empty" v-else>
					<image src="../../static/image/common/nullInfo.png"></image>
					抱歉，没有找到符合条件的商品~
				</view>

				<!-- 分页条 -->
				<pagination :pageNumber="pageNum" :totalSize="totalSize" @change="pageChange"></pagination>
			</view>
		</view>

		<!-- 今日推荐 -->
		<recommend ></recommend>

		<!-- 页脚 -->
		<view class="bottom">
			<zw-footer></zw-footer>
		</view>

	</view>
</template>

<script>
	import filterList from '@/components/search/filter-list.vue';
	import pagination from '@/components/common/pagination.vue';
	import recommend from '@/components/goods/recommend.vue';
	import {
		getAccToken,
		removeAccToken,
		removeRefToken
	} from '@/userToken.js'
	import {
		encrypt,
		decrypt
	} from '@/utils/jsencrypt';
	export default {
		components: {
			filterList,
			pagination,
			recommend
		},
		data() {
			return {
				keyword: '',
				categories: [],
				categoryIndex: 0,
				categoryId: '',
				sortModes: ['热门', '销量', '最新'],
				sortIndex: 0,
				goodsList: [],
				pageNum: 1,
				totalSize: 0,
				nullInfo:false,
				isHot: 1,
				onSellDesc: 0,
				soldNumDesc: 0,
				secList:[],//二级分类
				secId:'',//二级分类id
				secIndex:0,
			}
		},
		onLoad(e) {
			if (e.keyword) this.keyword = e.keyword;
			if (e.categoryId) this.categoryId = e.categoryId;
			this.initFilters();
			this.search();
		},
		
		methods: {
			
			initFilters() {
				uni.request({
					url: this.serverUrl + '/goods/category/first',
					method: 'GET',
					header: {
						'webuuid': encrypt(this.pageTenantId)
					},
					success: (res) => {
						if (res.data.code == 0 || res.data.code == 200) {
							this.categories = res.data.data
							this.categoryId = this.categories[0].id
							this.getSecList()
						} else {
							uni.showToast({
								title: res.data.msg,
								icon: 'none'
							})
						}
					}
				})
				
				
			},
			//获取二级分类
			getSecList(flag){
				uni.request({
					url: this.serverUrl + '/goods/category/category',
					method: 'GET',
					data:{
						parentId:this.categoryId
					},
					header: {
						'webuuid': encrypt(this.pageTenantId)
					},
					success: (res) => {
						if (res.data.code == 0 || res.data.code == 200) {
							this.secList = res.data.data
							var obj = {name:'全部',id:'-1'}
							this.secList.unshift(obj)
						} else {
							uni.showToast({
								title: res.data.msg,
								icon: 'none'
							})
						}
					}
				})
			},
			//切换二级分类
			changeSec(id,index){
				this.secIndex = index;
				this.secId = id;
				this.goodsList = [];
				this.search()
			},
			search() {
				uni.showLoading({
					title: '加载中...',
					mask: true
				});
				var that = this
				var params = {
					isHot: that.isHot,
					onSellDesc: that.onSellDesc,
					soldNumDesc: that.soldNumDesc,
					pageSize:30,
					pageNum:that.pageNum,
					name:that.keyword
				}
				if(this.secId && this.secId!='-1'){
					params.categoryId = this.secId
				}
				if(this.secId && this.secId =='-1'){
					params.categoryFirst = this.categoryId
				}
				uni.request({
					url: this.serverUrl + '/goods/list',
					method: 'GET',
					data: params,
					header: {
						'webuuid': encrypt(this.pageTenantId)
					},
					success: (res) => {
						uni.hideLoading()
						if (res.data.code == 0 || res.data.code == 200) {
							that.currentMax = Math.ceil(res.data.total / 10);
							that.totalSize = res.data.total;
							that.goodsList = res.data.rows;
							if (that.goodsList.length == 0) {
								that.nullInfo = true
							} else {
								that.nullInfo = false
							}
						} else {
							that.nullInfo = true
							uni.showToast({
								title: res.data.msg,
								icon: 'none'
							})
						}
					}
				})
				
			},
			change(index){
				this.sortIndex = index;
				this.goodsList = [];
				if (index ==  0) {
					this.isHot = 1
					this.soldNumDesc = 0
					this.onSellDesc = 0
					this.search()
				}else if(index == 1){
					this.isHot = 0
					this.soldNumDesc = 1
					this.onSellDesc = 0
					this.search()
				}else{
					this.isHot = 0
					this.soldNumDesc = 0
					this.onSellDesc = 1
					this.search()
				}
			},
			categoryChange(index) {
				this.categoryIndex = index;
				this.categoryId = this.categories[index].id;
				this.goodsList = [];
				this.secList = [];
				this.secIndex = 0;
				this.getSecList(true)
			},
			
			
			thumbSwitch(index, item, thumbIndex) {
				item.activeThumb = thumbIndex;
				// 触发页面更新
				this.$set(this.goodsList, index, item);
			},
			pageChange(e) {
				this.pageNum = e;
				this.goodsList = [];
				this.search();
				uni.pageScrollTo({
					scrollTop: 0,
					duration: 0
				});
			}
		}
	}
</script>

<style lang="scss">
	.search-wrapper {
		background-color: #fff;
		.wrap {
			max-width: $page-width;
			min-width: $page-minwidth;
			margin: 0 8vw;
			padding: 20px 0 100px;
			background-color: #fff;
			min-height: 600px;
			.goodsMain{
				display: grid;
				grid-template-columns: repeat(6, 1fr); /* 6列，每列等宽 */
				grid-gap: 20px;
				column-gap:20px;
				max-width: calc($page-width - 20px);
				min-width: calc( $page-minwidth - 20px);
				padding: 0 10px;
				.goodsItem{
					position: relative;overflow: hidden;border-radius: 8px;
					display: flex;align-items: center;flex-direction: column;
					width: 100%;background-color: #ffffff;
					cursor: pointer;
					image{
						aspect-ratio: 1 / 1;
					}
					.goodsName{
						color: #11192d;
						// font-family: PingFangSC-Medium; 
						font-size: 16px;font-weight: 500;
						width: calc(100% - 10px);margin: 5px;
						display: flex;justify-content: flex-start;align-items: center;
					}
					.goodsTip{
						display: flex;justify-content: space-between;align-items: center;
						padding: 0 10px;color: #999;font-size: 12px;position: absolute;
						bottom:16px;width: calc(100% - 20px);
					}
					.goodsZw{height: 10px;}
					.goodsPrice{
						padding: 5px 10px;width: calc(100% - 20px);
						display: flex;justify-content: flex-start;align-items: center;
						.price{
							color: $color-primary;font-size: 16px; font-weight: 700;
						}
						.priceBox{font-size: 22px; font-weight: 700;margin-left: 2px;}
						.market{
							background: rgb(253, 226, 94);
							color: #633b14;
							font-size: 12px;
							padding: 1px 2px;
							border-radius: 3px;
							margin-left: 8px;
						}
					}
				}
				.goodsItem:hover{
					border: 1px solid $color-primary;
					transform: scale(1.02);
					box-shadow: 0 5px 10px rgba(244, 104, 10, 0.1);
				}
			}
	
			.goods-empty {
				color: $text-color;
				height: 650px;
				width: 100%;color: #999;
				display: flex;align-items: center;justify-content: center;flex-direction: column;
			}
		}
	}
	.sort {
		background-color: $bg-color;
	
		.sortList {
			max-width: $page-width;
		min-width: $page-minwidth;
			margin: 0 8vw;
			display: flex;
			min-height: 60px;
			position: relative;
	
			&.separator {
				border-top: 1px solid $border-color;
			}
	
			.label {
				color: #b0b0b0;
				min-width: 45px;
				line-height: 60px;
			}
			.list {
				display: flex;
				flex-wrap: wrap;
				overflow: hidden;
				transition: height .3s ease-in;
			
				.item {
					width: 105px;
					height: 60px;
					line-height: 60px;
					text-align: center;
					.name {
						max-width: 145px;
						display: inline-block;
						color: #424242;
						cursor: pointer;
			
						&.active,
						&:hover {
							color: $color-primary;
						}
					}
				}
			}
		}
	}
	.nbsp{opacity: 0;}
</style>
